<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本字符间距</title>
</head>
<body>
  <style>
    h6 { color:red; }
    /* 示例1. */
    .normal { letter-spacing: normal;}
    .em-wide { letter-spacing: 0.4em;}
    .em-wider { letter-spacing: 1em;}
    .em-tight { letter-spacing: -0.1em;}
    .px-wide { letter-spacing: 6px;}
    
    /* 示例2. */
    p.wnormal { word-spacing: normal; }
    p.length { word-spacing: 5px; }
    
    /* 示例3. */
    .narrow {
      padding: 10px;
      border: 1px solid;
      width: 500px;
      margin: 0 auto;
      font-size: 20px;
      line-height: 1.5;
      letter-spacing: 1px;
    }
    .normal { word-break: normal;}
    .breakAll { word-break: break-all;}
    </style>
    
    <div>
      <h6>示例1.letter-spacing 字符间距设置</h6>
      <p class="lnormal">letter spacing，weiyigeek.top</p>
      <p class="em-wide">letter spacing，weiyigeek.top</p>
      <p class="em-wider">letter spacing，weiyigeek.top</p>
      <p class="em-tight">letter spacing，weiyigeek.top</p>
      <p class="px-wide">letter spacing，weiyigeek.top</p>
    </div>
    
    <div>
      <h6>示例2.word-spacing 单词间距设置</h6>
      <p class="wnormal">welcome to visit my blog.weiyigeek.top</p>
      <p class="length">welcome to visit my blog.weiyigeek.top</p>
    </div>
    
    <div>
      <h6>示例3.word-break单词内断行表现设置</h6>
        <p>1. <code>word-break: normal</code></p>
        <p class="normal narrow">
        This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
        Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
        这是一个漫长而光荣的海洋生物多样性研究
      </p>
      
      <p>2. <code>word-break: break-all</code></p>
      <p class="breakAll narrow">
        This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
        Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
        这是一个漫长而光荣的海洋生物多样性研究
      </p>
    </div>

    <div>
      <h6>示例4.white-space 对源文档中的空格、换行和 tab 字符的处理。</h6>
      <p style="white-space: normal;">This     paragraph has    many
        spaces           in it. -> normal: 时会合并空白符以及忽略换行符。</p>   
      <hr/>
      <p style="white-space: nowrap;">This     paragraph has    many
          spaces           in it.This     paragraph has    many
                      spaces           in it. -> nowrap: 此时会忽略换行符不自动换行。</p>
      <hr/>
      <p style="white-space: pre;">This     paragraph has    many
                spaces           in it.This     paragraph has    many
                    spaces           in it. -> pre: 此时保留空格，保留换行符，但是不自动换行.</p>
      <hr/>
      <p style="white-space: pre-wrap;">This     paragraph has    many
                spaces           in it.This     paragraph has    many
                    spaces           in it.  -> pre-wrap: 此时保留空格，保留换行符，</p>
      <hr/>
      <p style="white-space: pre-line;">This     paragraph has    many
                                spaces           in it.This     paragraph has    many
                                    spaces           in it.  -> pre-line: 此时合并空白符, 保留换行符，</p>
    </div>
</body>
</html>